NewBeginnings:ProgrammingClientSide
In the last part I told you we would do it "old-school", so here it is, be prepared for what you all expect and create a new page called "HelloWorldClient". Hello World! on the client's side And there you are, back in the GUI designer. If you thought softwares like Dreamweaver and Frontpage could give you some control over the visual design of a webpage, you've seen nothing. Never forget, just for the sake of it, that this thing let you design a HTML file visually and what you'll see is what you'll mostly get. I say mostly because some widgets will have very minor differences when you view the page from a browser. And as you may have already guessed, the browser used, the OS and the system theme will all impact on the visual result, but the guys really managed to keep it fairly consistent from a system to another. Adding widgets For the current exemple, you'll need only two widgets. In the widget bar pick a Text and a Button (you could use a Text Input, but we dont want people to enter text anywhere right now) and place them on the page so it looks like this. Feel free to edit the properties so the caption of both widgets suits you, and give them the following names: "txtHello" and "btnHello". After doing this, you can always give it a try, save your file and press the "Play" button to start the server and run your default browser. You will see exactly what you've designed inside your browser. You can click the button (notice that there is already a basic styling when the mouse cursor get over the button, etc.) even if it does absolutely nothing at the moment. Designing an interface in Wakanda is that easy! If you use an absolute design it won't get more complicated than that. You can also use constraints to get to more complex fluid desings that will adapt to the screen size, etc. And as you probably already know, you can also design for a different support, such as a smartphone or a tablet. Client-side coding Before we start coding our not-very-complex-first-app, let's come back on something I said in the last section of this tutorial. You will get to code on both side of the application that we will refer to as the client-side and the server-side. I already said that both sides are not directly connected and we will see how to interact with both of them. For now we will code on the client-side only. When you create a new event in the GUI designer, a new folder and file will be created in the page's directory. All the script files contained in the "WebFolder" are client-side code. So in short, any script that you access through the GUI designer will be client-side. You can also create your own script files and include them in your basic file to make your code modular or to include 3rd party frameworks (like jqWidgets or any other javascript library). Let'S add some code now. Select the button and go to the Events tab. Click the "+" icon beside the OnClick event to create it. Add the following code to the event handler that was created for you: btnHello.click = function btnHello_click (event) { var d = new Date(); $$('txtHello').setValue( "Hello World! - " + d.toString() ); }; Here is the part that lost me at first. The syntax here is derived from the jQuery library. jQuery let you access the DOM structure and manipulate it. It's also used as the base for the widget library associated to the jQuery project. IIRC, the Wakanda widget framework is based on jQuery too. Unlike the 'traditionnal' programming languages like Delphi and VB, you cannot access your widgets directly. Something like: txtHello.text = "Hello World!"; or even: txtHello.setValue("Hello World!"); might seem logical, but it's not the way it works. To do that you would need to declare variables associated to the widget entity. The guys behind Wakanda thought about us, derived the "$()" object from jQuery and created the "$$()" object. It is used to access a widget directly by using its name. So in the code above, what I do is to create a Date object, so we can see the button in action more than once and give a call to the "setValue()" function of the widget to define its text. You can now save the project again and refresh the page on the browser to appreciate your work! Everything is happening on the client-side, the code is a javascript program that is run by the browser itself and nothing happens on the server side, except the page being sent to the browser.